<template>
	<view class="content text-noraml">
		<view v-html="payForm"></view>
		
		<view class="pay">
			<text class="u-font-40">￥<text class="num">{{money || ''}}</text></text>
            <view class="u-font-24">待支付</view>
		</view>
		
		<view class="item">
			<view class="u-font-28 u-padding-bottom-25">选择支付方式</view>
			
			<view class="u-flex u-row-between" v-if="isWechat()" @click="payType = 1">
				<view class="right u-flex u-row-between">
					<image class="pay-icon" src="../../static/icon/wx.png"></image>
					<text class="u-font-28 text-bold u-padding-left-10">微信支付</text>
				</view>
				<image class="index-icon-30" :src="payType == 1 ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'"></image>
			</view>
			
			<view class="u-flex u-row-between u-p-t-50" @click="payType = 2">
				<view class="right u-flex u-row-between">
					<image class="pay-icon" src="../../static/icon/zfb.png"></image>
					<text class="u-font-28 text-bold u-padding-left-10">支付宝支付</text>
				</view>
				<image class="index-icon-30" :src="payType == 2 ? '../../static/icon/choose_1.png' : '../../static/icon/choose_2.png'"></image>
			</view>
		</view>
		<view class="btn u-font-34" @click="$noMultipleClicks(pay)">确认支付</view>
		
		<u-mask :show="Tshow" mode="center" border-radius="14">
		    <view class="popup">
		        <view class="win-box2">
		            <image src="../../static/image/t.png" class="pop-img"></image>
		        </view>
		    </view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Tshow: false,
                noClick:true,
				id: "",
				money: '',
				payInfo: '',
				payType: 1, //1-微信 2-支付宝
				payForm:'',
				token: '',
			};
		},
		onLoad(option) {
            console.log(option)
            let _this = this
			
			if (option.data) {
				let data = JSON.parse(decodeURIComponent(option.data))
				this.id = data.id
				this.money = data.money
				this.token = data.token
			}
            
            this.$ajax('wx_config', {
            	 url: location.href.split('#')[0],
            }).then(ret => {
            	
            	if (ret.status == 0) {
            		_this.$wx.config({
            		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            		    appId: ret.data.appId, // 必填，公众号的唯一标识
            		    timestamp: ret.data.timestamp, // 必填，生成签名的时间戳
            		    nonceStr: ret.data.nonceStr, // 必填，生成签名的随机串
            		    signature: ret.data.signature, // 必填，签名
						jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseImage',
						    'uploadImage', 'chooseWXPay', 'getLocation'],
            		});
            	} else {
            		that.$toast(ret.message);
            	}
            });
			
		},
		methods: {
			//判断是否在微信中
			isWechat() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					// console.log('是微信客户端')
					return true;
				} else {
					// console.log('不是微信客户端')
					this.payType = 2
					return false;
				}
			},
			
			pay() {
                console.log('1111',this.payType)
				var that = this;
				if (this.payType == 2) {
					if (this.isWechat()) {
						this.Tshow = true
					} else {
						that.$ajax('repay', {
							userToken: that.token,
							order_id: that.id,
							pay_type: 2,//1-微信 2-支付宝
						}).then(ret => {
							if (ret.status == 0) {
								const div = document.createElement('div');
								div.innerHTML = ret.data
								console.log(div.innerHTML)
								document.body.appendChild(div);
								console.log("punchout_form:"+document.forms)
								document.forms.alipaysubmit.submit();
							} else {
								that.$toast(ret.message);
							}
						});
					}
				} else {
					that.$ajax('repay', {
						userToken: that.$getSync('userToken'),
						order_id: that.id,
						pay_type: 1,//1-微信 2-支付宝
					}).then(ret => {
						if (ret.status == 0) {
							that.payInfo = ret.data
							that.$wx.ready(function() {
							    that.$wx.chooseWXPay({
							        appId: that.payInfo.appId,
							        timestamp: that.payInfo.timeStamp,
							        nonceStr: that.payInfo.nonceStr,
							        package: that.payInfo.package,
							        signType: that.payInfo.signType,//'MD5'
							        paySign: that.payInfo.paySign,
							        success: function(res) {
										that.$toast("付款成功")
							            uni.switchTab({
							            	url: '/pages/tabbar/mine'
							            })
							        },
							        fail: function(err) {
							            console.log(err)
							            that.$toast('支付失败！');
							        }
							    });
							})
						} else {
							that.$toast(ret.message);
						}
					});
				}
			},
			
		}
	};
</script>

<style lang="scss">
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box2 {
	    width: 100vw;
	    height: 100vh;
		background: rgba(0, 0, 0, .2);
	    position: relative;
	}
	.pop-img{
		width: 529rpx;
		height: 326rpx;
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	
	
	
	.dangqian{
        font-size: 26rpx;
        font-weight: normal;
        color: #e2a53f;
        padding-left: 10rpx;
    }
    .price{
        font-size: 30rpx;
        font-weight: bold;
    }
    
	page {
		background-color: #fff;
	}

	.content {
		padding: 20rpx;
        font-size: 30rpx;
	}

	.pay {
		padding: 70rpx 0;
		text-align: center;

		text {
			font-weight: bold;
		}

		.num {
			font-size: 60rpx;
			// padding-right: 10rpx;
		}
	}

	.item {
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;

		.right {
			.pay-icon {
				width: 40rpx;
				height: 40rpx;
                margin-right: 15rpx;
			}
		}

		.index-icon-30 {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-02 {
		width: 710rpx;
		height: 202rpx;
		margin: 0 auto 65rpx;
	}

	.btn {
		margin-top: 60rpx;
		padding: 25rpx 270rpx;
        background-color: #01b6bd;
		// background-image: linear-gradient(to right, #fd9c4a, #f67c2c, #f05c0d);
		border-radius: 50rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	
	.item-left{
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	}
	.icon{
	    width: 44rpx;
	    height: 44rpx;
	    margin-right: 15rpx;
	}
	.arrow-right{
	    width: 16rpx;
	    height: 29rpx;
	    margin-left: 15rpx;
	}
	
	.price1{
	    font-size: 28rpx;
	}
	.price-num1{
	    font-size: 44rpx;
	}
	.inp{
	    width: 50vw;
	    text-align: right;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	.inp1{
	    color: #f93835;
	}
	
	.cart{
		position: fixed;
		right: 40rpx;
		bottom: 70rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 2rpx solid #f05c0d;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #f05c0d;
	}
	.cart-img{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
	}
	
</style>
